import { useState } from "react";
import React from 'react';
import { useLiveQuery } from "dexie-react-hooks";
import { db } from './js/util/database.js';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableHead from '@mui/material/TableHead';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';
import { withStyles } from '@mui/styles';
import { useSelector, useDispatch } from 'react-redux';
import * as store from './reducers/partsSlice';
export default function FriendList(props) {
  const dispatch=useDispatch();
  const friends = useLiveQuery(
    async () => {
      const friends = await db.places.orderBy("lastVisit").reverse().toArray();
      return friends;
    },
  );
  return (<Table>
  <TableHead>
  <TableRow>
      <TableCell>id</TableCell>
      <TableCell>lastVisit</TableCell>
      <TableCell>title</TableCell>
      <TableCell>url</TableCell>
  </TableRow>
  </TableHead>
  <TableBody>
    {friends?.map((friend) =>{
      console.log(friend.lastVisit);
      let d=new Date(friend.lastVisit);
      let dstr=d.toISOString();
      return(<TableRow onClick={()=>{
        dispatch(store.partsSlice.actions.OPEN_URL(friend.url));
      }} key={friend.id}>
      <TableCell>{friend.id}</TableCell>
      <TableCell>{dstr}</TableCell>
      <TableCell>
      {friend.title}
      </TableCell>
      <TableCell>{friend.url}</TableCell>
    </TableRow>);
    })}
  </TableBody>
  </Table>);
}
